<template>
	<view class="">
		<u-toast ref="uToast"></u-toast>
		<view class="box">
			<view class="logo">
				<image src="@/static/img/logo.png" alt="" />
			</view>
			<view class="bot">
				<u-form :model="loginForm" :rules="rules" ref="uForm">
					<u-form-item label="用户名" prop="username" ref="username" border-bottom label-width="95px"
						left-icon="account-fill">
						<u-input placeholder="请输入账号" class="u-inp" v-model="loginForm.username" clearable />

					</u-form-item>
					<u-form-item label="密码" prop="password" ref="password" border-bottom label-width="95px"
						left-icon="lock-fill">
						<u-input v-show="showPassword===true" placeholder="请输入密码" class="u-inp"
							v-model="loginForm.password" clearable :password="true">
							<template slot="suffix">
								<u-icon name="eye-off" @click="hidepwd"></u-icon>
							</template>
						</u-input>
						<u-input v-show="showPassword===false" placeholder="请输入密码" class="u-inp"
							v-model="loginForm.password" clearable :password="false">
							<template slot="suffix">
								<u-icon name="eye" @click="hidepwd"></u-icon>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item label="验证码" prop="code" ref="code" border-bottom label-width="95px"
						left-icon="fingerprint">
						<u-input class="u-inp" v-model="loginForm.code">
							<template slot="suffix">
								<image :src="codeUrl" alt="验证码" @click="refreshCaptcha"
									style="width: 110rpx;height: 80rpx;">
							</template>
						</u-input>
					</u-form-item>

					<view class="login-btn">
						<!-- <u-button @click="jump" type="primary" text="登录" shape="circle"></u-button> -->
						<u-button @click="submit" type="primary" text="登录" shape="circle" style="margin-bottom:20rpx ;"></u-button>
						<u-checkbox-group>
							<u-checkbox :value="rememberMe" :checked="rememberMe"  shape="square" checkedColor="#ff791c" activeColor="#ff791c" @change="rememberChange"></u-checkbox>
							<view>
								<text class="text-grey1">记住账户密码</text>
							</view>
						</u-checkbox-group>
					</view>
				</u-form>
				
			</view>
		</view>
	</view>
</template>

<script>
	// import login from "@/api/login.js"
	import loginApi from "@/api/login.js"
	import commonApi from "@/api/common.js"
	import {
		BASE_URL
	} from '@/config/url.js'
	export default {
		options: { //如想在微信小程序中深度监听修改样式必须配此选项
			addGlobalClass: true
		},
		onLoad() {
			this.getCookie()
		},
		data() {
			return {
				showPassword: true,
				// 验证码图片路径
				codeUrl: "",
				//表单数据
				loginForm: {
					username: "",
					password: "",
					code: "",
					uuid: ''
				},
				// 记住密码
				rememberMe: false,
				//表单验证规则
				rules: {
					username: [{
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							return uni.$u.test.isEmpty(!value);
						},
						message: '输入不可为空',
						trigger: ['blur'],
					}],
					password: [{
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.isEmpty(!value);
						},
						message: '输入不可为空',
						trigger: ['blur'],
					}],
					code: [{
						type: 'string',
						required: true,
						message: '填写右侧验证码',
						trigger: ['blur']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.isEmpty(!value);
						},
						message: '输入不可为空',
						trigger: ['blur'],
					}]
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			//页面加载获取验证码
			this.refreshCaptcha();
			this.getCookie()
		},

		methods: {
			jump() {
				uni.switchTab({
					url: '/pages/home/index/index',
				});
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.handleClick()
				}).catch(errors => {
					uni.$u.toast('请重新输入账号密码')
				})
			},
			// 得到验证码
			refreshCaptcha() {
				// 调用后端接口获取新的验证码图片地址或数据
				// this.codeUrl = 'http://192.168.55.80:8001/captchaImage' + Date.now(); // 加上时间戳以避免图片缓存
				loginApi.getCodeImg().then(res => {
					this.codeUrl = "data:image/gif;base64," + res.data.img;
					this.loginForm.uuid = res.data.uuid;
				})
			},
			//获取存储的账号密码
			getCookie() {
				const username = uni.getStorageSync("username");
				const password = uni.getStorageSync("password");
				console.log('username', username, 'password', password);
				const rememberMe = uni.getStorageSync('rememberMe')
				this.loginForm.username = username === undefined ? this.loginForm.username : username
				this.loginForm.password = password === undefined ? this.loginForm.password : password
				this.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)

			},
			//点击登录按钮
			handleClick() {
				loginApi.login({
					username: this.loginForm.username,
					password: this.loginForm.password,
					code: this.loginForm.code,
					uuid: this.loginForm.uuid
				}).then((res2) => {
					if (res2.data.code == 200) {
						uni.setStorage({
							key: "token",
							data: res2.data.token,
							success: () => {
								uni.setStorage({
									key: 'userName',
									data: this.loginForm.username,
								})
								this.$refs.uToast.show({
									type: 'success',
									message: "登陆成功！",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								})
								uni.switchTab({
									url: '/pages/home/index/index',
								});
							},
						});
					} else if (res2.data.msg == '验证码已失效') {
						// alert(res2.data.msg)
						this.refreshCaptcha();
						uni.$u.toast(res2.data.msg);
					} else {
						uni.$u.toast(res2.data.msg);
					}
				});
			},
			//记住账号密码
			rememberChange(n) {
				if (n) {
					uni.setStorageSync("rememberMe",n);
					uni.setStorageSync("username", this.loginForm.username);
					uni.setStorageSync("password", this.loginForm.password);
				} else {
					// 销毁缓存中的账号、密码
					uni.removeStorageSync("rememberMe");
					uni.removeStorageSync("username");
					uni.removeStorageSync("password");
				}
			},
			//显示隐藏密码
			hidepwd() {
				this.showPassword = !this.showPassword;
			},
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.box {
		position: relative;
		width: 100%;
		height: 100%;

	}

	.logo {
		position: absolute;
		top: 228rpx;
		left: 231rpx;
		width: 288rpx;
		height: 288rpx;
	}

	.logo image {
		width: 100%;
		height: 100%;
	}

	.bot {
		position: absolute;
		top: 516rpx;
		left: 60rpx;
		width: 630rpx;
		/* height: 690rpx; */
		background: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
	}

	.u-form-item {
		width: 510rpx;
		margin: 40rpx 0 0 60rpx;
	}

	::v-deep .bot .u-input {
		border: none !important;
	}

	.login-btn {
		width: 510rpx;
		margin: 64rpx auto 40rpx;
		
	}
</style>